<template>
  <div>
    <!-- 条件查询 -->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input
          v-model="query.sourceFileName"
          clearable
          size="small"
          placeholder="请输入原文件名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.convertFileName"
          clearable
          size="small"
          placeholder="请输入转换后文件名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.status"
          clearable
          size="small"
          placeholder="转换状态"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in statusList" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-refresh" @click="crud.refresh()">刷新
        </el-button>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-bottom" @click="downloadZipTemplate">
          下载(源文件和转换后的文件)
        </el-button>
      </div>
    </div>
    <!-- 转换完成列表 -->
    <el-table
      ref="table"
      v-loading="crud.loading"
      border
      :data="crud.data"
      max-height="300"
      :span-method="dataSpanMethod"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column :show-overflow-tooltip="true" label="原文件名称" prop="sourceFileName" />
      <el-table-column :show-overflow-tooltip="true" label="原文件大小" prop="sourceFileSize" width="100" />
      <el-table-column :show-overflow-tooltip="true" label="转换后文件名称" prop="convertFileName" />
      <el-table-column :show-overflow-tooltip="true" label="转换后文件大小" prop="convertFileSize" width="130" />
      <el-table-column :show-overflow-tooltip="true" label="转换状态" prop="status" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 'SUCCESS'" type="success">成功</el-tag>
          <el-tag v-else-if="scope.row.status == 'FAIL'" type="warning">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="同屏预览" prop="tp" width="100">
        <template slot-scope="scope">
          <el-tag @click="lookContentComparison(scope.row)">预览</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="转换历史" prop="zhHis" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookConvertHistory(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="操作历史" prop="optHis" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookOptHistory(scope.row.convertTargetPkId)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="转换日志" prop="scriptConvertedLog">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showScriptConvertedLog(scope.row)">迁移日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div style="float: right;">
      <pagination />
    </div>

    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="showScriptConvertedLogFlag"
      title="脚本转换日志"
      width="1200px"
      top="5vh"
    >
      <monaco-editor
        ref="convertMonaco"
        v-model="scriptConvertedLogMessage"
        style="height: 430px"
      />
    </el-dialog>

    <!-- 转换历史 -->
    <el-dialog :visible.sync="isShowScriptHistory" append-to-body title="脚本转换历史" width="1400px">
      <convert-history
        v-if="isShowScriptHistory"
        :script-name="lookScriptName"
        :script-list-pk-id="lookConvertListPkId"
      />
    </el-dialog>

    <!-- 操作历史 -->
    <el-dialog :visible.sync="isShowOptHistory" append-to-body title="脚本操作历史" width="1000px">
      <opt-history v-if="isShowOptHistory" :convert-list-pk-id="lookConvertHistoryPkId" />
    </el-dialog>

    <!-- 同屏预览 -->
    <el-dialog :visible.sync="isShowComparison" append-to-body title="脚本同屏预览" width="90%" top="5vh">
      <same-screen-comparison
        v-if="isShowComparison"
        :convert-list-pk-id="lookConvertListPkId"
        :convert-target-pk-id="lookConvertTargetListPkId"
        :is-allow-edit="true"
        @changeComparisonVisible="changeComparisonVisible"
      />
    </el-dialog>
  </div>
</template>
<script>
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import scriptConvertListApi from '@/api/script/transfer/script-convert-list'
import { downloadFile } from '@/utils/index'
import convertHistory from '../convertHistory/convert-history'
import optHistory from '../optHistory/opt-history'
import sameScreenComparison from './same-screen-comparison'
import scriptConvertTaskApi from '@/api/script/transfer/script-convert-task'
import MonacoEditor from '@/components/MonacoEditor/monacoEditor'

const defaultCrud = CRUD({ title: '已转换清单', url: 'api/script/convert/list', crudMethod: { ...scriptConvertListApi }})
const defaultForm = {}

export default {
  name: 'ConvertFinishResult',
  components: { rrOperation, pagination, convertHistory, optHistory, sameScreenComparison, MonacoEditor },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    convertTaskPkId: {
      required: true,
      type: String
    },
    taskName: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      statusList: [
        { key: 'SUCCESS', label: '成功' },
        { key: 'FAIL', label: '失败' }
      ],
      isShowScriptHistory: false,
      lookScriptName: null,
      isShowOptHistory: false,
      lookConvertHistoryPkId: null,
      isShowComparison: false,
      lookConvertListPkId: null,
      lookConvertTargetListPkId: null,
      indexArray: [],
      tableData: [],
      showScriptConvertedLogFlag: false,
      scriptConvertedLogMessage: ''
    }
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.convertTaskPkId = this.convertTaskPkId
      if (crud.query.status === undefined || crud.query.status === null || crud.query.status === '') {
        crud.query.statusMore = ['SUCCESS', 'FAIL']
      } else {
        crud.query.statusMore = []
      }
    },
    // 合并单元格-START
    [CRUD.HOOK.afterRefresh](crud) {
      this.indexArray = []
      this.tableData = crud.data
      let count = 0
      for (let rowIndex = 0; rowIndex < this.tableData.length;) {
        this.indexArray.push(rowIndex)
        count = this.getRows(rowIndex, this.tableData[rowIndex].sourceFileName)
        rowIndex += count
      }
    },
    getRows(rowIndex, sourceFileName) {
      let count = 0
      for (let i = rowIndex; i < this.tableData.length; i++) {
        if (this.tableData[i].sourceFileName === sourceFileName) {
          count++
        } else {
          break
        }
      }
      return count
    },
    dataSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let rowCount = 0
        if (this.indexArray.includes(rowIndex)) {
          rowCount = this.getRows(rowIndex, row.sourceFileName)
          return { rowspan: rowCount, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    },
    // 合并单元格-END
    lookConvertHistory(data) {
      this.isShowScriptHistory = true
      this.lookScriptName = data.sourceFileName
      this.lookConvertListPkId = data.pkId
    },
    lookOptHistory(convertListPkId) {
      this.isShowOptHistory = true
      this.lookConvertHistoryPkId = convertListPkId
    },
    lookContentComparison(convertList) {
      this.isShowComparison = true
      this.lookConvertListPkId = convertList.pkId
      this.lookConvertTargetListPkId = convertList.convertTargetPkId
    },
    downloadZipTemplate() {
      crud.downloadLoading = true
      scriptConvertTaskApi.download(this.convertTaskPkId).then(result => {
        downloadFile(result, this.taskName + '-源文件和转换后的文件', 'zip')
        crud.downloadLoading = false
      }).catch(() => {
        crud.downloadLoading = false
      })
    },
    // 控制同屏预览是否展示
    changeComparisonVisible(val) {
      this.isShowComparison = val
    },
    showScriptConvertedLog(row) {
      this.showScriptConvertedLogFlag = true
      this.scriptConvertedLogMessage = row.convertLog === null ? '' : row.convertLog
    }
  }
}
</script>
